<template>
  <div class="search-page">
    <div class="search-top flexbox flex-center">
      <img
        class="bg !z-[3] object-cover"
        src="https://cd.sealmg.com/assets/img/search-box-bg.png"
        alt="Search background"
        title="Search page background"
        srcset=""
        loading="lazy"
      />
      <div class="search flexbox flex-align-center z-10">
        <el-input class="input" v-model="input" :placeholder="$t('formPlaceholder.search')" @keyup.enter.native="getClassifyList">
          <div slot="suffix" class="flexbox flex-center">
            <div class="clear flexbox flex-center">
              <img
                loading="lazy"
                v-if="input"
                class="clear-icon"
                src="https://cd.sealmg.com/assets/img/clear-icon.png"
                alt="Clear input"
                title="Clear search text"
                @click="clearInput"
              />
            </div>
            <div class="line"></div>
            <img
              loading="lazy"
              class="icon"
              src="https://cd.sealmg.com/assets/img/search-icon.png"
              alt="Search icon"
              title="Start search"
              @click="getClassifyList"
            />
          </div>
        </el-input>
      </div>
    </div>
    <div class="box flexbox flex-justify-between mx-auto max-w-7xl">
      <template v-if="goodsList.length">
        <div class="left-tab">
          <div class="list lg:!block !hidden">
            <!--$t('platform.list') platformList -->
            <div
              :class="['item flexbox flex-align-center flex-justify-between', curCategory.type == item.type ? 'active' : '']"
              v-for="item in tagetCategory"
              :key="item.id"
              @click="changeTab(item)"
            >
              <div class="left flexbox flex-align-center">
                <img loading="lazy" class="icon" v-lazy="item.icon" :alt="item.icon" srcset="" />
                <span class="text">{{ item.title }}</span>
              </div>
              <div class="right flexbox flex-align-center">
                <span class="text">{{ item.count || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right-con">
          <div class="mode">
            <div class="tab-box" v-if="goodsList.length">
              <div class="tab-list flexbox flex-align-center">
                <div
                  :class="['tab-item', curCategory.type == item.type ? 'tab-active' : '']"
                  v-for="item in tagetCategory"
                  :key="item.id"
                  @click="changeTab(item)"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
            <div class="title">
              <div class="row flexbox flex-align-center flex-justify-between">
                <div class="name">{{ curCategory.title }}</div>
              </div>
            </div>
            <div class="list card-list flexbox flex-wrap" v-if="curCategory.type == 1">
              <nuxt-link class="item flexbox flex-center" v-for="item in goodsList" :key="item.id" :to="localePath(`/product/${item.code}`)">
                <div class="item-box flexbox">
                  <div class="left-box flex-none">
                    <div class="img overflow-hidden border">
                      <img loading="lazy" class="size-full object-cover" v-lazy="$globalFn.imgPrefixUrl(item.image)" :alt="item.goods_name" />
                    </div>
                  </div>
                  <div class="right-box">
                    <div class="name line-clamp-1">{{ item.goods_name }}</div>
                    <div class="type" v-if="item.region && item.region.name">
                      {{ item.region.name }}
                    </div>
                    <div class="sale flex gap-1 items-center">
                      <span>
                        {{ $t('formItem.sale1') }}
                      </span>
                      <span>
                        {{ item.sales_actual >= 10000 ? (item.sales_actual / 10000).toFixed(2) + 'w' : item.sales_actual }}
                      </span>
                    </div>
                  </div>
                </div>
              </nuxt-link>
            </div>
            <div class="list game-recharge-list flexbox flex-wrap" v-if="curCategory.type == 2">
              <div class="item flexbox flex-tb flex-center" v-for="item in goodsList" :key="item.id" @click="gameRechargeDetail(item)">
                <img loading="lazy" class="img" v-lazy="$globalFn.imgPrefixUrl(item.image)" srcset="" :alt="item.image" />
                <div class="name line-clamp-2 px-1 text-center">{{ item.goods_name }}</div>
                <div class="type" v-if="item.region && item.region.name">
                  {{ item.region.name }}
                </div>
              </div>
            </div>
            <div class="list game-list flexbox flex-wrap" v-if="curCategory.type == 0">
              <nuxt-link class="item" v-for="item in goodsList" :key="item.id" :to="localePath(`/game/${item.code}`)">
                <img loading="lazy" class="img" v-lazy="$globalFn.imgPrefixUrl(item.image)" :alt="item.image" srcset="" />
                <div class="name">{{ item.title }}</div>
                <div class="type" v-if="item.region && item.region.name">
                  {{ item.region.name || '' }}
                </div>
              </nuxt-link>
            </div>
            <div class="" v-if="curCategory.type == 2 || curCategory.type == 1">
              <div class="mobile-list" v-if="goodsList.length">
                <nuxt-link
                  class="flexbox flex-align-center list-item"
                  v-for="item in goodsList"
                  :key="item.id"
                  :to="localePath(`/product/${item.code}`)"
                >
                  <img loading="lazy" class="img" v-lazy="$globalFn.imgPrefixUrl(item.image)" :alt="item.image" srcset="" />

                  <div class="base">
                    <div class="name">
                      <span v-if="curCategory.type == 1 || curCategory.type == 2">{{ item.goods_name }}</span>
                      <span v-if="curCategory.type == 0">{{ item.title }}</span>
                    </div>
                    <div class="type" v-if="item.region && item.region.name">
                      {{ item.region.name }}
                    </div>
                    <div class="flex gap-1 items-center">
                      <div class="desc" v-if="curCategory.type == 1">
                        {{ $t('formItem.sale1') }}{{ item.sales_actual >= 10000 ? (item.sales_actual / 10000).toFixed(2) + 'w' : item.sales_actual }}
                      </div>
                      <div class="rate !mt-0" v-if="item.sku && item.sku.length && Number(item.sku[0].discount)">
                        <span class="text">-{{ item.sku[0].discount || 0 }}%</span>
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>
            </div>
            <div class="" v-else>
              <div class="mobile-list" v-if="goodsList.length">
                <nuxt-link
                  class="flexbox flex-align-center list-item"
                  v-for="item in goodsList"
                  :key="item.id"
                  :to="localePath(`/game/${item.code}`)"
                >
                  <img loading="lazy" class="img" v-lazy="$globalFn.imgPrefixUrl(item.image)" :alt="item.image" srcset="" />

                  <div class="base">
                    <div class="name">
                      <span v-if="curCategory.type == 1 || curCategory.type == 2">{{ item.goods_name }}</span>
                      <span v-if="curCategory.type == 0">{{ item.title }}</span>
                    </div>
                    <div class="type" v-if="item.region && item.region.name">
                      {{ item.region.name }}
                    </div>
                    <div class="flex gap-1 items-center">
                      <div class="desc" v-if="curCategory.type == 1">
                        {{ $t('formItem.sale1') }}{{ item.sales_actual >= 10000 ? (item.sales_actual / 10000).toFixed(2) + 'w' : item.sales_actual }}
                      </div>
                      <div class="rate !mt-0" v-if="item.sku && item.sku.length && Number(item.sku[0].discount)">
                        <span class="text">-{{ item.sku[0].discount || 0 }}%</span>
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </template>
      <no-data type="search" v-if="goodsList.length == 0" :loading="loading"></no-data>
    </div>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    layout: 'newsHome',
    name: 'search',
    // key(route) {
    //   return route.fullPath;
    // },
    head() {
      return {
        title: 'Search - SEALMG',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'SEALMG Search Page - Find your favorite games, recharge cards and other digital products here'
          }
        ]
      }
    },
    data() {
      return {
        input: '', // 搜索输入框的值
        curCategory: {}, // 当前选中的分类
        tagetCategory: [], // 分类列表数据
        goodsList: [], // 商品列表数据
        loading: true, // 加载状态
        limit: 999999 // 每页数据条数限制
      }
    },
    computed: {},
    mounted() {
      this.loading = false
      this.input = this.$route.query.keywords || ''
      if (this.input) {
        this.getClassifyList()
      }
    },
    watch: {
      input: {
        handler(newVal) {
          // 更新URL参数但不跳转页面
          const newQuery = { ...this.$route.query, keywords: newVal }
          const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
          window.history.replaceState({}, '', newPath)
        }
      }
    },
    methods: {
      getClassifyList() {
        if (this.input == '') return
        this.goodsList = []
        this.loading = true
        this.$axios
          .get(`/api/goods/search?keywords=${this.input}`)
          .then(res => {
            if (res.length == 0) {
              this.loading = false
            }
            this.tagetCategory = res || []
            if (this.tagetCategory.length) {
              this.curCategory = this.tagetCategory[0]
              this.getGoodsList()
            } else {
            }
          })
          .catch(err => {
            this.loading = false
          })
      },
      clearInput() {
        if (this.input) {
          this.input = ''
          this.tagetCategory = []
          this.goodsList = []
        }
      },
      async getGoodsList() {
        let url = ''
        if (this.curCategory.type == 0) {
          url = `/api/game/index?page=1&limit=${this.limit}&keywords=${this.input}`
        } else {
          if (this.curCategory.type == 1) {
            url = `/api/goods/index?type=1&page=1&limit=${this.limit}&keywords=${this.input}`
          } else if (this.curCategory.type == 2) {
            url = `/api/goods/index?type=2&page=1&limit=${this.limit}&keywords=${this.input}`
          }
        }
        this.$axios
          .get(url)
          .then(res => {
            this.loading = false
            this.goodsList = res
          })
          .catch(err => {
            this.goodsList = []
            this.loading = false
          })
      },
      changeTab(item) {
        this.curCategory = item
        this.loading = true
        this.getGoodsList()
      },
      cardDetail(item) {
        let p = this.localePath(`/product/${item.code}`)
        return p
      },
      gameRechargeDetail(item) {
        this.$router.push({
          path: this.localePath(`/product/${item.code}`)
        })
      },
      gameDetail(item) {
        this.$router.push({
          path: this.localePath(`/product/${item.code}`)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .img {
    box-sizing: border-box;
    border: 1px solid #f7f7f7;
  }
  .search-page {
    .search-top {
      position: relative;
      height: 120px;
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 120px;
        z-index: -1;
      }
      .search {
        box-sizing: border-box;
        width: 600px;
        height: 56px;
        background: @color-ff;
        border-radius: 29px;
        .input {
          flex: 1;
          /deep/ .el-input__inner {
            padding-left: 24px;
            padding-right: 110px;
            height: 56px;
            line-height: 56px;
            width: 100%;
            border-color: @color-ff;
            font-weight: 500;
            font-size: 16px;
            color: @font-color-26;
            background: @color-ff;
            border-radius: 29px;
          }
          /deep/ .el-input__suffix {
            right: 16px;
            .el-input__suffix-inner {
              height: 56px;
              display: flex;
              align-items: center;
            }
          }
          /deep/ .el-input__inner:focus {
            background: @input-focus-bg;
            border: 1px solid @theme-color;
          }
        }
        .clear {
          width: 40px;
          height: 40px;
          .clear-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
        }
        .line {
          margin-left: 6px;
          width: 1px;
          height: 24px;
          background: @color-e5;
        }
        .icon {
          margin-left: 12px;
          width: 32px;
          height: 32px;
          cursor: pointer;
        }
      }
    }
    .box {
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
    }
    .left-tab {
      width: 336px;
      .title {
        padding: 0 16px;
        height: 56px;
        .icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
        .text {
          font-weight: 600;
          font-size: 16px;
          color: @font-color-26;
        }
      }
      .list {
        .item {
          padding: 0 16px;
          margin-bottom: 8px;
          height: 48px;
          cursor: pointer;
          border-radius: 8px;
          .left {
            .icon {
              width: 24px;
              height: 24px;
              margin-right: 8px;
            }
            .text {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
          }
          .right {
            .icon {
              width: 12px;
              height: 12px;
            }
            .text {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: bold;
              font-size: 12px;
              color: #b3b3b3;
              margin-right: 4px;
            }
          }
        }
        .item:hover {
          background: @color-f7;
        }
        .item.active {
          background: @input-focus-bg;
        }
      }
    }
    .right-con {
      width: 792px;
      .mode {
        .tab-box {
          display: none;
        }
        .title {
          box-sizing: border-box;
          padding: 20px 24px 12px 24px;
          .row {
            padding-bottom: 8px;
            border-bottom: @border-1-fo;
          }
          .name {
            font-weight: 500;
            font-size: 22px;
            color: @font-color-14;
          }
          .btn {
            box-sizing: border-box;
            padding: 0;
            width: 58px;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            text-align: center;
            color: @font-color-26;
            border-radius: 25px;
            border: none;
          }
        }
        .mobile-list {
          display: none;
        }
        .card-list {
          margin-top: 8px;
          padding: 20px;
          .item {
            width: 366px;
            height: 152px;
            margin-left: 20px;
            margin-bottom: 16px;
            cursor: pointer;
            .item-box {
              width: 334px;
              height: 104px;
              background: @color-f7;
              border-radius: 16px;
            }
            .left-box {
              width: 90px;
              position: relative;
              .img {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 90px;
                height: 120px;
                border-radius: 8px;
              }
            }
            .right-box {
              margin-top: 12px;
              margin-left: 12px;
              .name {
                font-weight: 500;
                font-size: 16px;
                color: @font-color-14;
              }
              .type {
                margin-top: 2px;
                font-size: 14px;
                color: @font-color-66;
              }
              .sale {
                margin-top: 12px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
          }
          .item:nth-child(2n + 1) {
            margin-left: 0;
          }
          .item:hover {
            .item-box {
              background: @color-ff;
              box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
            }
          }
        }
        .game-recharge-list {
          margin-top: 16px;
          .item {
            margin-left: 20px;
            margin-bottom: 20px;
            width: 183px;
            height: 180px;
            background: @color-f7;
            border-radius: 16px;
            cursor: pointer;
            .img {
              width: 80px;
              height: 80px;
              border-radius: 16px;
            }
            .name {
              margin-top: 18px;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
            }
            .type {
              margin-top: 2px;
              font-size: 12px;
              color: @font-color-66;
            }
          }
          .item:hover {
            background: @color-ff;
            box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
          }
          .item:nth-child(4n + 1) {
            margin-left: 0;
          }
        }
        .game-list {
          margin-top: 8px;
          .item {
            width: 183px;
            margin-left: 20px;
            margin-bottom: 30px;
            // height: 293px;
            cursor: pointer;
            .img {
              width: 183px;
              height: 244px;
              border-radius: 16px;
            }
            .name {
              margin-top: 8px;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
            .type {
              margin-top: 4px;
              font-size: 12px;
              color: @font-color-66;
            }
          }
          .item:nth-child(4n + 1) {
            margin-left: 0;
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
    .search-page {
      .search-top {
        position: relative;
        height: 120px;
        .bg {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 120px;
          z-index: -1;
        }
      }
    }
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .search-page {
      .search-top {
        box-sizing: border-box;
        width: 768px;
        padding: 0 16px;
        margin: 0 auto;
        height: auto;
        .bg {
          display: none;
        }
        .search {
          margin-top: 8px;
          box-sizing: border-box;
          padding: 0;
          width: 100%;
          height: 32px;
          background: @color-f7;
          border-radius: 23px;
          .input {
            flex: 1;
            /deep/ .el-input__inner {
              padding-left: 16px;
              padding-right: 70px;
              height: 32px;
              line-height: 32px;
              width: 100%;
              border: 0;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-26;
              border-radius: 23px;
              border-color: @color-f7;
              background: @color-f7;
            }
            /deep/ .el-input__suffix {
              right: 16px;
              .el-input__suffix-inner {
                height: 32px;
              }
            }
          }
          .clear {
            width: 20px;
            height: 20px;
            .clear-icon {
              width: 12px;
              height: 12px;
              cursor: pointer;
            }
          }
          .line {
            margin-left: 6px;
            height: 16px;
          }
          .icon {
            margin-left: 8px;
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
        }
      }
      .box {
        width: 768px;
        margin: 0 auto;
        margin-top: 8px;
      }
      .left-tab {
        display: none;
      }
      .right-con {
        width: 100%;
        .mode {
          padding: 0 16px;
          .tab-box {
            display: block;
            .tab-item {
              font-weight: 400;
              font-size: 14px;
              color: @font-color-99;
              height: 36px;
              margin-right: 24px;
            }
            .tab-active {
              font-weight: 500;
              color: @theme-color;
            }
          }
          .title {
            display: none;
          }
          .card-list {
            display: none;
          }
          .game-recharge-list {
            display: none;
          }
          .game-list {
            display: none;
          }
          .mobile-list {
            display: block;
            .list-item {
              margin-bottom: 16px;
              .img {
                width: 56px;
                height: 56px;
                border-radius: 8px;
              }
              .base {
                margin-left: 12px;
                .name {
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-14;
                }
                .desc,
                .type {
                  margin-top: 3px;
                  font-size: 12px;
                  color: @font-color-99;
                }
                .rate {
                  margin-top: 4px;
                  .text {
                    padding: 0 4px;
                    line-height: 15px;
                    font-weight: 600;
                    font-size: 10px;
                    color: @theme-color;
                    background: @input-focus-bg;
                    border-radius: 2px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .search-page {
      .search-top {
        box-sizing: border-box;
        width: 375px;
        padding: 0 16px;
        margin: 0 auto;
        height: auto;
        .bg {
          display: none;
        }
        .search {
          margin-top: 8px;
          box-sizing: border-box;
          padding: 0;
          width: 100%;
          height: 32px;
          background: @color-f7;
          border-radius: 23px;
          .input {
            flex: 1;
            /deep/ .el-input__inner {
              padding-left: 16px;
              padding-right: 70px;
              height: 32px;
              line-height: 32px;
              width: 100%;
              border: 0;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-26;
              border-radius: 23px;
              border-color: @color-f7;
              background: @color-f7;
            }
            /deep/ .el-input__suffix {
              right: 16px;
              .el-input__suffix-inner {
                height: 32px;
              }
            }
          }
          .clear {
            width: 20px;
            height: 20px;
            .clear-icon {
              width: 12px;
              height: 12px;
              cursor: pointer;
            }
          }
          .line {
            margin-left: 6px;
            height: 16px;
          }
          .icon {
            margin-left: 8px;
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
        }
      }
      .box {
        width: 375px;
        margin: 0 auto;
        margin-top: 8px;
      }
      .left-tab {
        display: none;
      }
      .right-con {
        width: 100%;
        .mode {
          padding: 0 16px;
          .tab-box {
            display: block;
            .tab-item {
              font-weight: 400;
              font-size: 14px;
              color: @font-color-99;
              height: 36px;
              margin-right: 24px;
            }
            .tab-active {
              font-weight: 500;
              color: @theme-color;
            }
          }
          .title {
            display: none;
          }
          .card-list {
            display: none;
          }
          .game-recharge-list {
            display: none;
          }
          .game-list {
            display: none;
          }
          .mobile-list {
            display: block;
            .list-item {
              margin-bottom: 16px;
              .img {
                width: 56px;
                height: 56px;
                border-radius: 8px;
              }
              .base {
                margin-left: 12px;
                .name {
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-14;
                }
                .desc,
                .type {
                  margin-top: 3px;
                  font-size: 12px;
                  color: @font-color-99;
                }
                .rate {
                  margin-top: 4px;
                  .text {
                    padding: 0 4px;
                    line-height: 15px;
                    font-weight: 600;
                    font-size: 10px;
                    color: @theme-color;
                    background: @input-focus-bg;
                    border-radius: 2px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
